<template>
	<view class="hours">
		<statusBar />
		<!-- 设置 -->
		<view @tap="leftIndex" class="nav">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>设置-店铺设置-营业时间</view>
		</view>
		<!-- <view class="setup" @tap="dataTime">
			<view>请选择每周营业日</view>
		
			<view>
				<view>营业日</view>
				<view>{{ dayeTime }}</view>
			</view>
		</view> -->
		<!-- 请选择每周营业日 -->
		<view class="dateAct">请选择每周营业日</view>
		<!-- 时间选择 -->
		<view class="time">
			<view class="vTime" v-for="(v, i) in ListTime" :key="i">
				<view @tap="detele(i)"><image src="../../static/setup/jingzhi.png" mode=""></image></view>
				<view @tap="timeTrue(i)">{{ v.startTime }}</view>
				<view>至</view>
				<view @tap="daysTime(i)">{{ v.endTime }}</view>
				<view v-if="curchoose == i" @tap="deltavis(i)">删除</view>
			</view>

			<view v-if="this.ListTime.length == 3"></view>
			<view class="vTimeone" v-else @tap="createInput">+ 添加营业时间段</view>
		</view>
		<view class="Login" @tap="interface">保存</view>
		<!-- 	<u-popup v-model="show" mode="center" length="85%">
			<view class="TimeDate">
				<view>请选择营业天数</view>
				<view>
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox active-color="#35394C" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
							{{ item.name }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="cancel">
					<view>取消</view>
					<view>确定</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 左一时间 -->
		<u-picker mode="time" v-model="showTime" :params="params" @confirm="confirm"></u-picker>

		<!-- 左二时间 -->
		<u-picker mode="time" v-model="TimeTrue" :params="params" @confirm="confirm1"></u-picker>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			show: false,
			TimeTrue: false,
			// business: '',
			// selectime: '',
			// dayeTime: '',
			deleteFalse: false, //删除
			showTime: false,
			params: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			// list: [
			// 	{
			// 		name: '周一',
			// 		checked: false,
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '周二',
			// 		checked: false,
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '周三',
			// 		checked: false,
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '周四',
			// 		checked: false,
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '周五',
			// 		checked: false,
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '周六',
			// 		checked: false,
			// 		disabled: false
			// 	},
			// 	{
			// 		name: '周日',
			// 		checked: false,
			// 		disabled: false
			// 	}
			// ],
			ListTime: [],
			startTime: '00:00',
			endTime: '00:00',
			curchoose: ''
		};
	},
	components: {
		statusBar
	},
	onLoad() {
		this.Initialize();
		
	},
	
	methods: {
		// 营业时间接口
		interface() {
			// 接口
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/shop/get-store-info', 'POST', {
				timeArr:this.ListTime
			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data);
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
			});
		},
		Initialize() {
			// 接口
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/shop/get-store-info', 'GET', {
				
			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data);
					this.ListTime = res.data.data.timeArr;
					console.log(this.ListTime, 66666);
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					this.ListTime = JSON.parse(res.data).data.timeArr;
				} catch (e) {
					//TODO handle the exception
					this.ListTime = res.data.data.timeArr;
				}
			});
		},
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		// dataTime() {
		// 	this.show = true;
		// },
		// 选中某个复选框时，由checkbox时触发
		// checkboxChange(e) {
		// 	console.log(e, 2222999);
		// 	this.dayeTime = e[0];
		// 	console.log(this.dayeTime);
		// },
		// 选中任一checkbox时，由checkbox-group触发
		// checkboxGroupChange(e) {
		// 	console.log(e, 2222999);
		// 	this.dayeTime = e[0];
		// 	console.log(this.dayeTime);
		// },
		// 左一
		timeTrue(index) {
			this.curchoose = index;
			console.log(this.curchoose, 77);
			this.showTime = true;
		},
		confirm(e) {
			this.startTime = e.hour + ':' + e.minute;
			console.log(this.startTime, 333);
		},
		// 右一
		daysTime() {
			this.TimeTrue = true;
		},
		confirm1(e) {
			this.endTime = e.hour + ':' + e.minute;
			console.log(this.endTime, 333);
		},
		detele(index) {
			this.curchoose = index;
			console.log(this.curchoose, 7888);
			this.deleteFalse = true;
		},
		deltavis(index) {
			var ListTime = this.ListTime;
			ListTime.splice(index, 1);
			console.log('你删除了第' + index + '个');
		},
		// 添加时间段
		createInput() {
			this.ListTime.push({ startTime: '00:00', endTime: '00:00' });
		}
	}
};
</script>
<style lang="scss" scoped>
.hours {
	/deep/.u-checkbox-group {
		display: grid !important;
	}
	/deep/.u-checkbox {
		line-height: 3.8 !important;
	}
	/deep/.u-checkbox__label {
		margin-left: 59upx !important;
		font-size: 30upx !important;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1) !important;
	}
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 31upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.setup {
		padding-top: 100upx;
		& > view:nth-child(1) {
			font-size: 29upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: $bg5-color;
			padding: 32upx 25upx;
		}
		& > view:nth-child(2) {
			background: #ffffff;
			height: 90upx;
			padding: 23upx 50upx 31upx 29upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			& > view:nth-child(1) {
				width: 20%;
				font-size: 38upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg6-color;
			}
			& > view:nth-child(2) {
				font-size: 29upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg5-color;
			}
		}
	}
	.dateAct {
		font-size: 29upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 32upx;
		padding: 0 25upx;
	}
	// 时间
	.time {
		background: $bg1-color;
		margin-top: 24upx;
		padding: 32upx 126upx 39upx 62upx;
		position: relative;
		.vTime {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 32upx;
			& > view:nth-child(1) {
				image {
					width: 34upx;
					height: 34upx;
				}
			}
			& > view:nth-child(2) {
				width: 205upx;
				height: 96upx;
				border: 2upx solid rgba(153, 153, 153, 1);
				border-radius: 8upx;
				font-size: 34upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			& > view:nth-child(3) {
				font-size: 29upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
			& > view:nth-child(4) {
				width: 205upx;
				height: 96upx;
				border: 2upx solid rgba(153, 153, 153, 1);
				border-radius: 8upx;
				font-size: 34upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			& > view:nth-child(5) {
				background: $bg7-color;
				height: 70upx;
				width: 150upx;
				color: $bg1-color;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
			}
		}
		.vTimeone {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			border: 1upx solid #edeff9;
			padding-top: 39upx;
			padding-bottom: 39upx;
		}
	}
	.TimeDate {
		padding: 48upx 51upx 48upx 51upx;
		& > view:nth-child(1) {
			font-size: 42upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.cancel {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			& > view {
				font-size: 36upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				width: 100upx;
			}
		}
	}
	.Login {
		width: 93%;
		height: 112upx;
		margin: 0 auto;
		background: rgba(53, 57, 76, 1);
		border-radius: 56upx;
		font-size: 34upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: $bg1-color;
		position: fixed;
		bottom: 36upx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
